<template>
  <div>
    <PageHeader hidden-breadcrumb>
        <template #title><div class="demo-title">角色权限管理</div></template>
        <template #content>
          <div class="demo-content">页面数据为 Mock 示例数据，非真实数据。</div>
        </template>
    </PageHeader>
    <Card style="margin:20px;">
      <Button type="primary" icon="md-add" ghost>新增角色</Button>
      <div class="ivu-inline-block ivu-fr">
        <Dropdown trigger="click">
          <Tooltip content="密度" placement="top">
            <Icon type="md-list" size="16"></Icon>
          </Tooltip>
          <template #list>
              <DropdownMenu>
                  <DropdownItem>默认</DropdownItem>
                  <DropdownItem>宽松</DropdownItem>
                  <DropdownItem>紧凑</DropdownItem>
              </DropdownMenu>
          </template>
        </Dropdown>
        <Tooltip content="全屏" placement="top" style="margin-left:10px;">
          <Icon type="md-expand" size="16"></Icon>
        </Tooltip>
        <Tooltip content="刷新" placement="top" style="margin-left:10px;">
          <Icon type="ios-refresh" size="18"/>
        </Tooltip>
        <Dropdown trigger="click" style="margin-left:10px;">
          <Tooltip content="列设置" placement="top">
            <Icon type="md-options" size="16"></Icon>
          </Tooltip>
          <template #list>
              <DropdownMenu>
                  <DropdownItem>角色名称</DropdownItem>
                  <DropdownItem>说明</DropdownItem>
                  <DropdownItem>创建时间</DropdownItem>
                  <DropdownItem>更新时间</DropdownItem>
              </DropdownMenu>
          </template>
        </Dropdown>
      </div>
      <Table :columns="columns" :data="data" style="margin-top:16px;">
        <template #name="{ row }">
            <strong>{{ row.name }}</strong>
        </template>
        <template #action="{ row, index }">
            <Button type="text" size="small" style="margin-right: 5px" @click="editRolePermission(row)"><a>菜单权限</a></Button>
            <Button type="text" size="small" style="margin-right: 5px" @click="show(index)"><a>编辑</a></Button>
            <Button type="text" size="small" @click="remove(index)"><a>删除</a></Button>
        </template>
      </Table>
      <div class="ivu-mt ivu-text-center">
        <Page :total="100" show-sizer />
      </div>
    </Card>

    <Modal v-model="modal1" width="460">
        <template #header>
            {{modalTitle}}
        </template>
        <Scroll height="550">
            <Tree :data="menuList" show-checkbox></Tree>
        </Scroll>
        <template #footer>
            <Button type="primary" ghost @click="expandBtn">{{expand?'全部收起':'全部展开'}}</Button>
            <Button type="primary" ghost @click="selectBtn">{{checked?'全部取消':'全部选中'}}</Button>
            <Button type="primary" @click="submit">提交</Button>
        </template>
    </Modal>
  </div>
</template>

<script>
import MenuData from '@/utils/MenuData.json'
export default {
    data () {
        return {
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '角色名称',
                    key: 'roleName'
                },
                {
                    title: '说明',
                    key: 'content'
                },
                {
                    title: '创建时间',
                    key: 'createTime'
                },
                {
                    title: '更新时间',
                    key: 'updateTime'
                },
                {
                    title: '是否默认角色',
                    key: 'role'
                },
                {
                    title: 'Action',
                    slot: 'action',
                    width: 300,
                    align: 'center'
                }
            ],
            data: [
                {
                    roleName: 'ROLE_USER',
                    content: '普通用户',
                    createTime: '2020-07-01 12:01:25',
                    updateTime: '2020-07-01 13:01:25',
                    role: '是'
                },
                {
                    roleName: 'ROLE_OP',
                    content: '运营用户',
                    createTime: '2020-07-01 12:01:25',
                    updateTime: '2020-07-01 13:01:25',
                    role: '否'
                },
                {
                    roleName: 'ROLE_ADMIN',
                    content: '管理员用户',
                    createTime: '2020-07-01 12:01:25',
                    updateTime: '2020-07-01 13:01:25',
                    role: '否'
                }
            ],
            modalTitle:'',
            parentMenus: MenuData.applysList,
            applyMenusList: MenuData.applyMenusList,
            menuList:[],
            checked: false,
            expand:true,
            modal1:false,
        }
    },
    created(){
        this.getMenus()

    },
    methods: {
        show (index) {
            this.$Modal.info({
                title: 'User Info',
                content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`
            })
        },
        remove (index) {
            this.data.splice(index, 1);
        },
        getMenus(){
            this.menuList = []
            this.parentMenus.forEach((menu,index) => {
                menu.expand = true
                menu.children = this.applyMenusList[menu.appcode]
            });
            this.menuList = this.parentMenus
        },
        editRolePermission(data){
            this.modalTitle = '分配 '+ data.roleName +' 的菜单权限'
            this.modal1 = true
        },
        expandBtn(){
            this.expand = !this.expand
            this.menuList.forEach(element => {
                element.expand = this.expand
            });
        },
        selectBtn(){
            this.checked = !this.checked
            this.menuList.forEach(element => {
                element.checked = this.checked
                element.children.forEach(child => {
                    child.checked = this.checked
                });
            });
        },
        submit(){
            this.modal1 = false;
            this.$Message.success({
                background: true,
                content: '授权成功'
            });
        },
    }
}
</script>
